<template>
  <tiny-dropdown trigger="click" :show-icon="false">
    <div class="flex items-center text-center h-[var(--sidebar-height)]">
      <img src="@/assets/images/avatar.png" alt="" class="w24px h24px rounded-[50%]" />
      <span class="text-14px pl-[5px] text-[var(--top-header-text-color)]">{{ userStore.name }}</span>
    </div>
    <template #dropdown>
      <tiny-dropdown-menu>
        <tiny-dropdown-item>
          <div @click="logout">注销退出</div>
        </tiny-dropdown-item>
      </tiny-dropdown-menu>
    </template>
  </tiny-dropdown>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores'
import { Modal } from '@opentiny/vue'
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()
const logout = () => {
  Modal.confirm('您是否确认退出登录?', '温馨提示').then(res => {
    if (res === 'confirm') {
      userStore.userLogout()
      Modal.message({
        message: '退出登录成功！',
        status: 'info'
      })
      router.push(`/login?redirect=${route.fullPath}`)
    }
  })
}
</script>

<style lang="scss" scoped></style>
